<template>
    <div :class="$route.name == 'home' ? 'nav-active' : 'nav'">
        <div class="content">
            <div class="content-left mouse-active" @click="$router.push('/')">
                <el-image :src="require('@/assets/img/logo.png')"></el-image>
                <span class="page-title">{{ $t('nav.title') }}</span>
            </div>
            <div class="content-center">
                <template v-for="item in list">
                    <div class="router-demo" :key="item" v-if="item.show">
                        <router-link :to="item.path"><span :data-font="$i18n.locale">{{
                            item.title
                        }}</span></router-link>
                    </div>
                </template>

                <div class="lang mouse-active">
                    <span @click="addlanguage" :data-font="$i18n.locale">{{ language }}</span>
                </div>
            </div>
            <div class="content-right">
                <button v-if="!$store.getters.token" class="login" @click="login" @mouseenter.stop="over"
                    @mousemove.stop="move">
                    <span class="login-title" :data-font="$i18n.locale">{{ $t('nav.login') }}</span>
                    <div class="side"></div>
                </button>
                <button v-if="!$store.getters.token" class="registered" @click="registered" @mouseenter.stop="over"
                    @mousemove.stop="move">
                    <span class="registered-title" :data-font="$i18n.locale">{{ this.$t('nav.register') }}</span>
                    <div class="side"></div>
                </button>
                <div class="logTab mouse-active" v-if="!!$store.getters.token">
                    <el-image class="avatar" :src="page == 1 ? icon1 : icon"></el-image>
                    <div class="tabs-main">
                        <div class="tabs">
                            <div class="tab" :data-font="$i18n.locale" @click="$router.push('/userInfo/myInfo')">
                                {{ $t('nav.personalCenter') }}
                            </div>
                            <div class="tab" :data-font="$i18n.locale" @click="$router.push('/userInfo/myRegistrations')">
                                {{ $t('nav.myRegistrations') }}
                            </div>
                            <div class="line"></div>
                            <div class="tab" :data-font="$i18n.locale" @click.stop="unlogin">
                                {{ $t('nav.unlogin') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "nav-top",
    props: {
        page: {
            type: [Number, String],
            default: 2
        }
    },
    data() {
        return {
            icon: require('@/assets/img/userAvatar.png'),
            icon1: require('@/assets/img/userAvatar-active.png')
        }
    },
    mounted() {

    },
    methods: {
        // 登录
        login() {
            this.$store.commit('setRoute', this.$route.path)
            this.$router.push('/login')
        },
        // 注册
        registered() {
            this.$store.commit('setRoute', this.$route.path)
            this.$router.push('/register')
        },
        unlogin() {
            this.$store.commit('setRoute', this.$route.path)
            $cookies.remove('token');
            $cookies.remove('nickname');
            $cookies.remove('avatar');
            this.$router.go(0)
        },
        move(e) {
            e.target.lastChild.style.top = e.offsetY + 'px';
            e.target.lastChild.style.left = e.offsetX + 'px';

        },
        over(e) {
            e.target.lastChild.style.top = e.offsetY + 'px';
            e.target.lastChild.style.left = e.offsetX + 'px';
        },
        addlanguage() {
            if (this.$i18n.locale === 'zh') {
                this.$i18n.locale = 'en'
                localStorage.setItem('my_locale', 'en')
            } else if (this.$i18n.locale === 'en') {
                this.$i18n.locale = 'zh'
                localStorage.setItem('my_locale', 'zh')
            }
            location.reload();
        }
    },
    computed: {
        language() {
            if (this.$i18n.locale === 'en') {
                return '中文'
            } else if (this.$i18n.locale === 'zh') {
                return 'En'
            }
        },
        list() {
            return [{
                type: "route",
                title: this.$t('nav.home'),
                path: "/",
                show: true
            },
            {
                type: "route",
                title: this.$t('nav.application'),
                path: "/application",
                show: true
            },
            {
                type: "route",
                title: this.$t('nav.news'),
                path: "/news",
                show: true
            },
            {
                type: "route",
                title: this.$t('nav.competitionJudges'),
                path: "/competitionJudges",
                show: true
            },
            {
                type: "route",
                title: this.$t('nav.pastReview'),
                path: "/pastReview",
                show: true
            },
            {
                type: "route",
                title: this.$t('nav.relatedInformation'),
                path: "/relatedInformation",
                show: false
            },
            {
                type: "route",
                title: this.$t('nav.organizingCommittee'),
                path: "/committee",
                show: true
            }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.nav-top {
    transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
}

.nav {
    margin: 0 auto;
    z-index: 999;
    width: 51.2rem;
    height: 2.67rem;
    background: linear-gradient(315deg, rgba(250, 251, 255, 0.75) 0%, rgba(252, 248, 255, 0.75) 100%);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

    .content {
        display: flex;
        align-items: center;
        height: 100%;

        .content-left {
            margin-right: 0.8rem;
            display: flex;
            align-items: center;

            .el-image {
                width: 1.44rem;
                height: 1.25rem;
                margin-right: 0.21rem;
            }

            .page-title {
                height: 1.44rem;
                font-size: 1.01rem;
                font-family: 'zcoolqingkehuangyouti-Regular', 'zcoolqingkehuangyouti';
                font-weight: 400;
                color: #212121;
                line-height: 1.44rem;
            }
        }

        .content-center {
            margin-right: 0.75rem;
            display: flex;
            align-items: center;
            height: 100%;

            .router-demo {
                display: flex;
                align-items: center;
                height: 100%;

                a {
                    display: inline-block;
                    height: 100%;
                    padding: 0 0.44rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

                    span {
                        font-size: 0.59rem;
                        font-weight: normal;
                        color: #212121;
                        transform: translateY(0);
                        transition: transform 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                    }

                    span[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-DEJ,IdeaFonts-DianHei';
                    }

                    span[data-font='en'] {
                        font-family: 'RNSSanzSC-Normal, RNSSanzSC';
                    }

                }

                a:hover {

                    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);

                    span {
                        font-weight: bold;
                        color: #FFFFFF !important;
                        transform: translateY(-0.106rem);
                    }

                    span[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei' !important;

                    }

                    span[data-font='en'] {
                        font-family: 'RNSSanzSC-Bold, RNSSanzSC' !important;
                    }
                }

                a:hover::after {
                    content: "";
                    position: absolute;
                    bottom: 0.01rem;
                    left: 0;
                    width: 100%;
                    height: 0.05rem;
                    background: #7709CC;
                }
            }

            .lang {
                display: flex;
                align-items: center;
                margin-left: 0.5rem;

                span {
                    display: inline-block;
                    height: 0.96rem;
                    font-size: 0.59rem;
                    font-weight: normal;
                    color: #212121;
                    line-height: 0.96rem;
                }

                span[data-font='zh'] {
                    font-family: 'RNSSanzSC-Normal, RNSSanzSC';
                }

                span[data-font='en'] {
                    font-family: IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei;
                }
            }
        }


        .content-right {
            display: flex;
            align-items: center;

            .login {
                padding: 0.19rem 0.59rem;
                background: linear-gradient(315deg, rgb(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                margin-right: 0.48rem;
                border-radius: 0.1066rem;
                border: 0.03rem solid #7709CC;
                backdrop-filter: blur(10px);
                transform: scale(1);
                overflow: hidden;
                transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

                .login-title {
                    pointer-events: none;
                    transition: color 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                    z-index: 8;
                    font-size: 0.48rem;
                    font-weight: 300;
                    color: #7709CC;
                    line-height: 0.69rem;
                }

                .login-title[data-font='zh'] {
                    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
                }

                .login-title[data-font='en'] {
                    font-family: 'PingFangSC-Light, PingFang SC';
                }

                .side {
                    pointer-events: none;
                    z-index: 1;
                    position: absolute;
                    width: 0.64rem;
                    height: 0.64rem;
                    border-radius: 50%;
                    background-color: #9000ff;
                    transform: translate(-50%, -50%);
                    filter: blur(9px);
                    opacity: 0;
                    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }


            }

            .login:hover .side {
                opacity: 0.5;
                transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .login:active {
                transform: scale(0.9);
                border: none;
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);

                .login-title {
                    transition: color 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                    color: #FFFFFF;
                }

                .side {
                    opacity: 0;
                }
            }

            .registered {
                padding: 0.19rem 0.59rem;
                border-radius: 0.1066rem;
                border: 0.03rem solid #7709CC;
                backdrop-filter: blur(10px);
                background: linear-gradient(315deg, rgb(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                overflow: hidden;
                transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

                .registered-title {
                    pointer-events: none;
                    transition: color 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                    z-index: 8;
                    font-size: 0.48rem;
                    font-weight: 300;
                    color: #7709CC;
                    line-height: 0.69rem;
                }

                .registered-title[data-font='zh'] {
                    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';

                }

                .registered-title[data-font='en'] {
                    font-family: 'PingFangSC-Light, PingFang SC';
                }

                .side {
                    pointer-events: none;
                    z-index: 1;
                    position: absolute;
                    width: 0.64rem;
                    height: 0.64rem;
                    border-radius: 50%;
                    background-color: #9000ff;
                    filter: blur(9px);
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }
            }

            .registered:hover .side {
                opacity: 0.5;
                transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .registered:active {
                transform: scale(0.9);
                border: none;
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);

                .registered-title {
                    transition: color 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                    color: #FFFFFF;
                }

                .side {
                    opacity: 0;
                }
            }
        }
    }

    .router-link-active {
        background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);

        span {
            font-weight: bold !important;
            color: #FFFFFF !important;
        }

        span[data-font='zh'] {
            font-family: 'IdeaFonts-DianHei-FEJ,IdeaFonts-DianHei' !important;

        }

        span[data-font='en'] {
            font-family: 'RNSSanzSC-Bold, RNSSanzSC' !important;
        }
    }

    .router-link-active::after {
        content: "";
        position: absolute;
        bottom: 0.01rem;
        left: 0;
        width: 100%;
        height: 0.05rem;
        background: #7709CC;
    }
}

.nav-active {
    margin: 0 auto;
    z-index: 999;
    width: 51.2rem;
    height: 2.67rem;
    backdrop-filter: blur(10px);
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.25) 0%, rgba(159, 34, 255, 0.25) 100%);
    background-color: none;
    border-bottom: 0.05rem solid #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

    .content {
        display: flex;
        align-items: center;
        height: 100%;

        .content-left {
            margin-right: 0.8rem;
            display: flex;
            align-items: center;

            .el-image {
                width: 1.44rem;
                height: 1.25rem;
                margin-right: 0.21rem;
            }

            .page-title {
                font-size: 1.01rem;
                font-family: 'zcoolqingkehuangyouti-Regular', 'zcoolqingkehuangyouti';
                font-weight: 400;
                color: #FFFFFF;
                line-height: 1.44rem;
            }
        }

        .content-center {
            margin-right: 0.75rem;
            display: flex;
            align-items: center;
            height: 100%;

            .router-demo {
                display: flex;
                align-items: center;
                height: 100%;

                a {
                    display: inline-block;
                    height: 100%;
                    padding: 0 0.44rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;

                    span {
                        transition: transform 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                        font-size: 0.59rem;
                        font-weight: normal;
                        color: #FFF;
                    }

                    span[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
                    }

                    span[data-font='en'] {
                        font-family: 'RNSSanzSC-Normal, RNSSanzSC';
                    }
                }

                a:hover {
                    background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                    backdrop-filter: blur(10px);

                    span {
                        transform: translateY(-0.106rem);
                        font-weight: bold;
                        color: #FFFFFF;
                    }

                    span[data-font='zh'] {
                        font-family: 'IdeaFonts-DianHei-FEJ,IdeaFonts-DianHei';
                    }

                    span[data-font='en'] {
                        font-family: 'RNSSanzSC-Bold, RNSSanzSC';
                    }
                }
            }

            .lang {
                display: flex;
                align-items: center;
                margin-left: 0.5rem;

                span {
                    display: inline-block;
                    height: 0.96rem;
                    font-size: 0.59rem;
                    font-weight: normal;
                    color: #FFFFFF;
                    line-height: 0.96rem;
                }

                span[data-font='zh'] {
                    font-family: 'RNSSanzSC-Normal, RNSSanzSC';
                }

                span[data-font='en'] {
                    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
                }
            }
        }


        .content-right {
            display: flex;
            align-items: center;

            .login {
                padding: 0.19rem 0.59rem;
                background: linear-gradient(to right, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                backdrop-filter: blur(10px);
                border-radius: 0.1066rem;
                border: 0.03rem solid #FFFFFF;
                margin-right: 0.48rem;
                overflow: hidden;
                position: relative;
                transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

                .login-title {
                    pointer-events: none;
                    z-index: 8;
                    font-size: 0.48rem;
                    font-weight: 300;
                    color: #FFFFFF;
                    line-height: 0.69rem;
                    transition: color 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }

                .login-title[data-font='zh'] {
                    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';

                }

                .login-title[data-font='en'] {
                    font-family: 'PingFangSC-Light, PingFang SC';
                }

                .side {
                    pointer-events: none;
                    z-index: 1;
                    position: absolute;
                    width: 0.64rem;
                    height: 0.64rem;
                    border-radius: 50%;
                    background-color: #9000ff;
                    filter: blur(9px);
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }
            }

            .login:hover .side {
                opacity: 0.5;
                transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .login:active {
                transform: scale(90%);
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
                color: #7709cc;
                border: none;

                .login-title {
                    transition: color 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }

                .side {
                    opacity: 0;
                }
            }

            .registered {
                padding: 0.19rem 0.59rem;
                background: linear-gradient(to right, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
                border-radius: 0.1066rem;
                border: 0.03rem solid #FFFFFF;
                backdrop-filter: blur(10px);
                position: relative;
                overflow: hidden;
                transition: all 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);

                .registered-title {
                    pointer-events: none;
                    z-index: 8;
                    font-size: 0.48rem;
                    font-weight: 300;
                    color: #FFFFFF;
                    line-height: 0.69rem;
                    transition: color 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }

                .registered-title[data-font='zh'] {
                    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';

                }

                .registered-title[data-font='en'] {
                    font-family: 'PingFangSC-Light, PingFang SC';
                }

                .side {
                    pointer-events: none;
                    z-index: 1;
                    position: absolute;
                    width: 0.64rem;
                    height: 0.64rem;
                    border-radius: 50%;
                    background-color: #9000ff;
                    filter: blur(9px);
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: opacity 0.25s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }
            }

            .registered:hover .side {
                opacity: 0.5;
                transition: opacity 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .registered:active {
                transform: scale(90%);
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
                border: none;

                .registered-title {
                    transition: color 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
                }

                .side {
                    opacity: 0;
                }
            }
        }
    }

    .router-link-active {
        background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
        backdrop-filter: blur(10px);

        span {
            font-weight: bold !important;
            color: #FFFFFF;
        }

        span[data-font='zh'] {
            font-family: 'IdeaFonts-DianHei-FEJ,IdeaFonts-DianHei' !important;
        }

        span[data-font='en'] {
            font-family: 'RNSSanzSC-Bold, RNSSanzSC' !important;
        }
    }

}

.nav-active:hover {
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.25) 0%, rgba(159, 34, 255, 0.25) 100%);
}

.logTab {
    margin-left: 4.16rem;
    width: 0.64rem;
    height: 0.64rem;
    position: relative;
    display: flex;
    align-items: center;

    .avatar {
        background-color: rgba(255, 255, 255, 0);
        width: 100%;
        height: 100%;
    }

    .tabs-main {
        position: absolute;
        top: 0.32rem;
        right: 0;
        display: none;
        z-index: 999;
        width: 4.8rem;
        padding-top: 0.43rem;

        .tabs {
            width: 100%;
            background: linear-gradient(315deg, rgba(250, 251, 255, 1) 0%, rgba(252, 248, 255, 1) 100%);
            border: 0.05rem solid #FFFFFF;
            backdrop-filter: blur(10px);
            padding: 0.21rem;

            .line {
                width: 3.52rem;
                height: 0.03rem;
                background: #C5C5CA;
                margin: 0.21rem auto 0.21rem;
            }

            .tab {
                padding-left: 0.45rem;
                display: flex;
                align-items: center;
                width: 100%;
                height: 1.17rem;
                backdrop-filter: blur(10px);
                font-size: 0.37rem;
                font-weight: normal;
                line-height: 0.53rem;
                color: #68656C;
            }

            .tab[data-font='zh'] {
                font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            }

            .tab[data-font='en'] {
                font-family: 'Helvetica';
            }

            .tab:hover {
                color: #FFFFFF;
                background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
            }
        }
    }
}

.logTab:hover {
    .tabs-main {
        display: block;
    }
}
</style>